<template>
  <form @submit.prevent="handleSubmit">
    <div class="input-group">
      <input
          v-model="loginId"
          type="text"
          placeholder="手机号/邮箱"
          @input="validateInput"
      >
      <div v-if="errorMessage" class="error-msg">{{ errorMessage }}</div>
    </div>

    <div class="input-group">
      <input
          v-model="password"
          type="password"
          placeholder="密码"
      >
    </div>

    <button type="submit" class="auth-button">
      立即登录
    </button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const loginId = ref('');
const password = ref('');
const errorMessage = ref('');

const validateInput = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const phoneRegex = /^1[3-9]\d{9}$/;

  if (!emailRegex.test(loginId.value) && !phoneRegex.test(loginId.value)) {
    errorMessage.value = '请输入有效的手机号或邮箱';
  } else {
    errorMessage.value = '';
  }
};

const handleSubmit = () => {
  // 提交逻辑
};
</script>

<style scoped>
.input-group {
  margin-bottom: 1.5rem;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
}

.error-msg {
  color: #e74c3c;
  font-size: 0.8rem;
  margin-top: 4px;
}

.auth-button {
  width: 100%;
  padding: 12px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.auth-button:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  input {
    padding: 10px;
    font-size: 0.9rem;
  }
}
</style>
